<template>
    <!--分类导航栏部分-->
    <div class="catalog-bar">
        <el-radio-group  fill='#33a3dc' v-model="activeName" size="small" @change="changeCurrentCatalog(activeName)">
            <el-radio-button :label="c.id" v-for="(c,index) in catalogList" :key="index">{{c.cname}}</el-radio-button>
        </el-radio-group>
    </div>
</template>

<script>
    import request from "@/util/request";

    export default {
        name: "MyCatalogBar",

        data() {
            return {
                //如果是路由传参使用this.$route.params获取参数，否则就是传统传参(&/?)使用this.$route.query
                activeName: this.$route.params.catalog?this.$route.params.catalog:this.$route.query.catalog,  //当前的选择类别
                catalogList: [
                    {
                        "version": 0,
                        "createTime": "2020-11-25 19:24:38",
                        "modifyTime": "2020-11-25 19:24:38",
                        "flag": true,
                        "cid": 1,
                        "id": "all",
                        "cname": "全部",
                        "pid": "top"
                    }
                ]
            }
        },
        mounted() {
            if (this.$store.state.catalogListData) {
                console.log('版块列表已经初始化....');
                //console.log(this.$store.state.catalogListData);
                this.catalogList = this.$store.state.catalogListData;
            } else {
                console.log('版块列表未始化....');
                this.initCatalogList();
            }

            //把当前版面名字保存在状态管理，方便博文详情页面去获取。
            this.$store.dispatch("actionSetCurrentCatalogNameData",this.$route.params.catalog);
            //当前的菜单选项打印
            //console.log("当前选中的菜单项是："+this.$store.state.currentMenuData);
            //获取当前的路由字符串

            //console.log("当前路由字符串:"+this.$route.path);
            if(this.$route.path.indexOf("Blog")!=-1){
                this.$store.dispatch("actionSetCurrentMenuData","博客");
            }

            if(this.$route.path.indexOf("Course")!=-1){
                this.$store.dispatch("actionSetCurrentMenuData","教程");
            }
            //当前的菜单选项打印
            //console.log("当前选中的菜单项是："+this.$store.state.currentMenuData);
        },

        methods:{
            initCatalogList(){
                request.get('/blog/catalog/').then(resp => {
                    if (resp.data.code === 200) {
                        for(let i=0;i<resp.data.data.length;i++){
                            this.catalogList.push(resp.data.data[i]);
                        }
                        this.$store.dispatch('actionSetCatalogListData', this.catalogList);
                        this.catalogList = this.$store.state.catalogListData;
                    }
                }).catch(err => {
                    console.log(err);
                })
            },

            changeCurrentCatalog(catalogName){
                //路由跳转...
                //console.log('板块名字：'+catalogName);
                this.$store.dispatch("actionSetCurrentCatalogNameData",catalogName);
                //console.log("store里保存的板块数据是："+this.$store.state.currentCatalogNameData);
                if(this.$store.state.currentMenuData=='博客') {
                    window.location.href = '/pBlogList/' + catalogName;
                }
                if(this.$store.state.currentMenuData=='教程') {
                    window.location.href = '/pCourseList/' + catalogName;
                }
            }
        }
    }
</script>

<style scoped>
   .catalog-bar{
       margin-top: 5px;
   }

</style>